<template>
  <div class="v-config-mgt">
    <c-row-crumb :title="multLang('title_aaw_t')"></c-row-crumb>
    <c-row less-width="20px" class="v-config-body">
      <c-col :col="3" top>
        <div class="v-config-title">
          {{ multLang('title_pk') }}
        </div>
        <c-row-search single>
          <c-row less-width="66px" :col="12">
            <c-col>
              <el-input
                v-model="keyword"
                clearable
                @keyup.enter.native="search"
                :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
              >
                <c-icon slot="prefix" name="search" prefix></c-icon>
              </el-input>
            </c-col>
            <c-col less right>
              <el-button type="primary" @click="search">
                {{ multLang('btn_search_a') }}
              </el-button>
            </c-col>
          </c-row>
        </c-row-search>
        <c-roll class="v-config-tree">
          <el-tree
            ref="tree"
            :data="filterData"
            node-key="value"
            @node-click="treeClick"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
          >
            <template slot-scope="{ data }">
              <c-text-long>
                {{ multLang(data.label) }}
              </c-text-long>
            </template>
          </el-tree>
        </c-roll>
      </c-col>
      <c-col less></c-col>
      <c-col :col="9" top>
        <div class="v-config-title">
          {{ multLang(tree.click.label) }}
        </div>
        <c-config-list ref="CConfigList" :info="tree.click"> </c-config-list>
      </c-col>
    </c-row>
  </div>
</template>
<script>
import { searchWord } from '@/util/data'
import CConfigList from './mod/List.vue'
export default {
  name: 'VConfigMgt',
  components: {
    CConfigList
  },
  props: {},
  data() {
    return {
      keyword: '',
      tree: {
        click: {},
        info: [],
        option: {}
      },
      filterData: []
    }
  },
  computed: {
    bussinessConfigTypeList() {
      return this.optionList('bussiness_config_type')
    }
  },
  watch: {
    bussinessConfigTypeList: {
      deep: true,
      handler() {
        this.search()
      }
    },
    filterData: {
      deep: true,
      handler(val) {
        this.treeClick(val[0] || {})
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.setOption({ key: 'bussiness_config_type' })
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(
        this.keyword,
        this.bussinessConfigTypeList,
        'label'
      )
    },
    treeClick(node) {
      this.tree.click = node
      this.$nextTick().then(() => {
        this.$refs.tree.setCurrentKey(node.value)
      })
      this.$refs.CConfigList.keyword = ''
    }
  }
}
</script>
<style lang="scss">
.v-config {
  // &-mgt {
  // }
  &-body {
    height: calc(100% - 42px);
  }
  &-title {
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  &-tree {
    box-sizing: border-box;
    height: calc(100% - 118px);
    padding: 20px;
    background-color: #fff;
    .c-text-long {
      font-size: 14px;
    }
  }
}
</style>
